<template>
  <div class="fold-box">
    <div class="fold-box-hd" @click="display()" v-if="$slots.hd">
      <CaretRightOutlined /><slot name="hd"></slot>
      <span class="hd-right">
        <slot name="hd-right"></slot>
      </span>
    </div>
    <div class="content-bd" v-show="show">
      <slot name="bd"></slot>
    </div>
  </div>
</template>
<script lang="ts">
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    components: { CaretRightOutlined },
    setup() {
      let show = ref<Boolean>(true);
      return {
        show,
      };
    },

    methods: {
      display(v) {
        this.show = v !== undefined ? v : !this.show;
      },
    },
  });
</script>
<style lang="scss">
  .fold-box {
    .fold-box-hd {
      padding: 6px 0 6px 0px;
      font-size: 14px;
      position: relative;
      cursor: pointer;
      .anticon {
        font-size: 14px;
        margin-right: 5px;
        color: #999;
      }
      .hd-right {
        position: absolute;
        right: 16px;
        top: 6px;
      }
    }
    .content-bd {
      padding: 0 16px;
      font-size: 12px;
    }
  }
</style>
